<template>
  <div class="swiper-controls">
    <svg
      @click="swiper.slidePrev()"
      class="prev-btn"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="0.25"
        y="0.25"
        width="23.5"
        height="23.5"
        rx="11.75"
        stroke="#CCD6DE"
        stroke-width="0.5"
      />
      <path d="M14.25 8L9.75 12L14.25 16" stroke="#172026" />
    </svg>
    <div class="page">
      <span>{{ currentIndex + 1 }} / {{ swiper.slides.length }}</span>
    </div>
    <svg
      @click="swiper.slideNext()"
      class="next-btn"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="0.25"
        y="0.25"
        width="23.5"
        height="23.5"
        rx="11.75"
        stroke="#CCD6DE"
        stroke-width="0.5"
      />
      <path d="M9.75 16L14.25 12L9.75 8" stroke="#172026" />
    </svg>
  </div>
</template>

<script setup lang="ts">
const swiper = useSwiper();
type Props = {
  currentIndex: number;
};
const props = withDefaults(defineProps<Props>(), {
  currentIndex: 0,
});

</script>

<style lang="less" scoped>
.swiper-controls {
  display: flex;
  align-items: center;
  .page {
    margin: 0 82px;
    font-size: 92px;
  }
  svg {
    width: 123px;
    height: 123px;
  }
}
</style>
